<template>

  <div class="login">
    <div class="asidePic" id="asidePic"></div>
    <div class="fuc">
      <div class="pic">
        <div class="Img"></div>
        <span>运动商城</span>
      </div>


      <div class="inp">

        <div>
          <div>
            <el-input placeholder="请输入账号" prefix-icon="el-icon-user-solid" v-model="username">
            </el-input>
          </div>

          <div style="margin-top:10px">
            <el-input placeholder="请输入密码" prefix-icon="el-icon-edit" show-password v-model="password"></el-input>
          </div>

          <div style="margin-top:10px">
            <el-switch v-model="remember" active-color="#13ce66" inactive-color="#ff4949" active-text="Remember me">
            </el-switch>
          </div>

          <div style="margin-top:10px;display:flex;justify-content:center;">
            <el-button type="primary" plain @click="LoginCheck">登录</el-button>
            <el-button type="success" plain @click="gotoRegister">Register</el-button>
            <!-- <el-button type="warning" plain>Reset</el-button> -->
          </div>

        </div>
      </div>

    </div>
  </div>

</template>
<script>
export default {
  data() {
    return {
      username: 'admin',
      password: '123456',
      remember: true
    }
  },
  methods: {
    gotoRegister() {
      this.$router.push("/login/coreRegister");
    },
    // 登录校验，成功跳转
    LoginCheck() {
      this.$http({
        url: '/login',
        params: {
          //键值对
          username: this.username,
          password: this.password
        },
        method: 'post'
      }).then(res => {
        // 登录成功判断，以及保存token
        if (res.data.meta.status !== 200) {
          return this.$message.error('登录失败')
        } else {
          this.$message.success('登录成功')
          window.sessionStorage.setItem('token', res.data.data.token)
          // 完了Vuex使用，偷偷存用户名和id
          window.sessionStorage.setItem('user_id', res.data.data.user_id)
          window.sessionStorage.setItem('username', res.data.data.username)
          this.$router.push("/sportsShop");
        }
      }).catch(res => {
        console.log(res);
      })
    }
  }
}
</script>
<style>
.login {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);

  width: 600px;
  height: 320px;
  background-color: rgba(255, 159, 127, 0.3);
  box-shadow: 0px 0px 8px rgba(0, 247, 255, 0.5);
  border-radius: 15px;
  overflow: hidden;
}


.login #asidePic {
  width: 220px;
  height: 100%;

  position: absolute;
  left: 0;
  top: 0;

  /* background-color: blueviolet; */
  background-image: url("../assets/mypic/asideLogin.jpg");
  background-repeat: no-repeat;
  background-size: cover;
}

.fuc {
  width: 380px;
  height: 100%;

  position: absolute;
  right: 0;
  top: 0;

  /* background-color: brown; */
}

.fuc .pic {
  height: 70px;
  width: 100%;
  line-height: 70px;
  position: absolute;
  top: 25px;
  left: 50%;

  transform: translateX(-50%);
}

.pic span {
  /* display: inline-block; */
  padding-top: 10px;
  padding-left: 10px;
  line-height: 70px;
  text-shadow: 0px 0px 8px rgba(231, 104, 20, 0.565);
  font-size: 40px;
  color: #303133;
}

.pic .Img {
  width: 70px;
  height: 70px;
  border-radius: 50%;

  background-image: url("../assets/mypic/mainUserPic.jpg");
  background-repeat: no-repeat;
  background-size: cover;

  position: absolute;
  left: 13%;
}

.inp {
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);

  width: 330px;
}
</style>